<script setup="">
import {onMounted, ref} from "vue"
import {Close} from "@element-plus/icons-vue"

defineProps({
  msg: {
    type: String,
    required: false,
  }
})
const dataList = ref([])
const page = ref(1)
const size = ref(20)
const total = ref(0)
const sort = ref(1)

async function getData() {
  dataList.value = []
  const res = await adminGetTweet({
    "keyword": keyword.value,
    "column": columnActivate.value,
    "page": page.value,
    "size": size.value,
    "sort": sort.value,
    "start_time": !dateRange.value[0] ? "" : dateRange.value[0].getTime(),
    "end_time": !dateRange.value[1] ? "" : dateRange.value[1].getTime(),
  })
  total.value = res.data.total
  dataList.value = res.data.list
}

async function getColumnData() {
  const res = await adminGetColumn()
  columnList.value = res.data ? res.data : []
  columnActivate.value = res.data[0]
  getData()
}

onMounted(() => {
  getColumnData()
})

async function closeAndRefresh() {
  newTweetVisible.value = false
  dataList.value = []
  setTimeout(() => {
    getData()
  }, 50)
}

function changeTimeRange() {
  getData()
}

function deleteColumn(column) {
  ElMessageBox.confirm(
      '是否要删除此专栏？相关推文并不会删除，当你重新添加此专栏时，推文的专栏所属关系不会改变',
      '请确认',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }
  )
      .then(async () => {
        columnList.value.splice(columnList.value.indexOf(column),1)
        await adminUpdateColumn({
          column: columnList.value.join(",")
        })
        await getColumnData()
      })
      .catch(() => {
          }
      )
}

async function addNewColumn() {
  if (newColumnTxt.value.trim() === "") {
    ElMessage.warning("请输入内容")
    return
  }
  if (newColumnTxt.value.trim().indexOf(",") > -1 || newColumnTxt.value.trim().indexOf("，") > -1) {
    ElMessage.warning("名称中有不合法的字符")
    return
  }
  if (columnList.value.indexOf(newColumnTxt.value.trim()) > -1) {
    ElMessage.warning("该专栏已存在")
    return
  }
  await adminUpdateColumn({
    column: columnList.value.length === 0 ? newColumnTxt.value.trim() : columnList.value.join(",") + "," + newColumnTxt.value.trim()
  })
  newColumnTxt.value = ""
  addColumnDialog.value = false
  getColumnData()
}

function clickColumn(column) {
  if (column === columnActivate.value) return
  columnActivate.value = column;
  getData();
}

const newColumnTxt = ref("")
const dateRange = ref([])
const newTweetVisible = ref(false)
const keyword = ref("")
const columnActivate = ref("")
const columnList = ref([])
const addColumnDialog = ref(false)
import {Search, Plus} from "@element-plus/icons-vue"
import TweetCard from "@/components/home/TweetCard.vue";
import {adminDeleteTweet, adminGetColumn, adminGetTweet, adminUpdateColumn} from "@/request/mid_interface.js";
import NewOrEditTweet from "@/components/home/NewOrEditTweet.vue";
import {ElMessage, ElMessageBox} from "element-plus";

</script>

<template>
  <div class="flex justify-between">
    <el-dialog destroy-on-close center v-model="addColumnDialog" width="500">
      <div class="text-center text-xl font-bold text-black">新增专栏</div>
      <div class="flex flex-col justify-center items-center mt-12 mb-8">
        <input v-model="newColumnTxt" class="mx-auto bg-gray-100 px-5 py-3 w-96  rounded-xl" style="font-size: 15px"
               type="text" placeholder="请输入专栏名称">
        <div @click="addNewColumn" class="mt-8 px-8 py-2.5 text-white font-bold rounded-full cursor-pointer select-none"
             style="background: var(--themeColor)">确认
        </div>
      </div>
    </el-dialog>
    <el-dialog :destroy-on-close="true" :center="true" v-model="newTweetVisible" title="" width="800">
      <NewOrEditTweet @close="newTweetVisible=false" @refresh="closeAndRefresh"/>
    </el-dialog>
    <div class="flex items-center text-gray-500">
      <div class="flex items-center text-gray-500 mr-2.5">
        <el-date-picker
            v-model="dateRange"
            type="monthrange"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="终止时间"
            @change="changeTimeRange"
            :prefix-icon="null"
            clear-icon=""
        />
        <el-icon v-if="dateRange.length" @click="dateRange=[];getData()" class="ml-3 cursor-pointer">
          <Close></Close>
        </el-icon>
      </div>
    </div>
    <div class="flex items-center">
      <div class="flex items-center bg-white pl-4 rounded-full">
        <el-icon color="#888">
          <Search></Search>
        </el-icon>
        <input v-model="keyword" @keydown.enter="getData" class=" w-32 py-2 pr-3 pl-2 bg-transparent outline-0"
               placeholder="请输入关键字">
      </div>
      <div
          @click="newTweetVisible=true"
          class="px-5 py-2 bg-white ml-2.5 rounded-full font-bold flex items-center cursor-pointer select-none hover:opacity-60 transition"
          style="color: #E9A325">
        <el-icon class="mr-1">
          <Plus></Plus>
        </el-icon>
        新增文章
      </div>
    </div>
  </div>

  <div class="flex mt-4">
    <div class="flex flex-col items-center mr-5 pt-1">
      <div
          v-for="item in columnList"
          class="min-w-32 flex justify-center items-center px-5 py-2 mb-3 rounded-full text-white font-bold cursor-pointer select-none transition"
          @click="clickColumn(item)"
          :style="{
          background: item===columnActivate? 'white':'',
          color: item===columnActivate? 'var(--themeColor)':'#666',
          border: item===columnActivate? '1px solid var(--themeColor)':'1px solid transparent',
          fontWeight: item===columnActivate? 'normal':'normal',
        }">{{ item }}
        <el-icon @click="deleteColumn(item)" class="ml-2" v-if="item===columnActivate">
          <Close></Close>
        </el-icon>
      </div>
      <div
          @click="addColumnDialog=true" style="color: #888;background: #00000008"
          class="text-sm text-gray-400 flex justify-center items-center px-4 py-2 mb-3 mt-3 rounded-full cursor-pointer select-none transition"
      >
        <el-icon size="14px" class="mr-0.5">
          <Plus></Plus>
        </el-icon>
        新增专栏
      </div>
    </div>

    <div class="flex-1">
      <div class="grid grid-cols-2 gap-3">
        <template v-for="item in dataList">
          <TweetCard class="" @refresh="getData" :param="item"></TweetCard>
        </template>
      </div>
      <div v-if="dataList.length===0">
        <el-empty description="没有数据"></el-empty>
      </div>
      <div class="flex justify-center mt-5">
        <el-pagination
            v-model:current-page="page"
            v-model:page-size="size"
            :hide-on-single-page="true"
            layout="prev, pager, next, jumper"
            :total="total"
            @size-change="getData"
            @current-change="getData"
        />
      </div>
    </div>
  </div>

</template>

<style scoped>

/deep/ .el-date-editor .el-range-separator {
  color: #bbb;
  transform: translateY(-1px);
}

/deep/ .el-date-editor .el-range__icon {
  display: none;
}

/deep/ .el-range-input {
  font-size: 14.5px;
}

</style>
